<!-- 各省受灾等级情况 -->
<template>
  <!-- 地图量算 -->
  <div class="measure-map">
    <div class="map-box">
      <div id="container" class="container">
        <div class="map-buttons">
          <!-- 类型搜索start -->
          <el-select
            class="typeSelect"
            v-model="typeSelect"
            placeholder="请选择类型"
            size="mini"
          >
            <el-option
              v-for="item in options"
              :key="item.SiteName"
              :label="item.SiteName"
              :value="item.SiteName"
            >
            </el-option>
          </el-select>
          <el-button
            id="selectBtn"
            class="selectBtn"
            size="mini"
            icon="el-icon-search"
            @click="searchTypeClick"
          ></el-button>

          <el-button
            type="text"
            size="mini"
            @click="addRoadLayer"
            v-show="!roadNetwork"
            class="map-btn map-element"
            >{{ lang === "zh_cn" ? "打开路网" : "Open road" }}</el-button
          >
          <el-button
            type="text"
            size="mini"
            @click="removeRoadLayer"
            v-show="roadNetwork"
            class="map-btn map-element"
            >{{ lang === "zh_cn" ? "关闭路网" : "Close road" }}</el-button
          >

          <el-button
            type="text"
            size="mini"
            @click="addSatellite"
            v-show="isOrdMap"
            class="map-btn map-element"
            >{{ lang === "zh_cn" ? "卫星地图" : "Satellite map" }}</el-button
          >
          <el-button
            type="text"
            size="mini"
            @click="removeSatellite"
            v-show="!isOrdMap"
            class="map-btn map-element"
            >{{ lang === "zh_cn" ? "普通地图" : "General map" }}</el-button
          >

          <el-button
            type="text"
            size="mini"
            @click="resetMap"
            class="map-btn map-element"
            >{{ lang === "zh_cn" ? "复位" : "Reset" }}</el-button
          >
        </div>
      </div>
    </div>
    <div class="logobox">
      <h3>受灾级别图例(受灾数)</h3>

      <div style="display: flex; margin-bottom: 8px">
        <div style="width: 50px; height: 20px; background: #ffba73"></div>
        <span style="padding-left: 10px; line-height: 20px">0</span>
      </div>
      <div style="display: flex; margin-bottom: 8px">
        <div style="width: 50px; height: 20px; background: #ffa040"></div>

        <span style="padding-left: 10px; line-height: 20px">1 ~ 5</span>
      </div>
      <div style="display: flex; margin-bottom: 8px">
        <div style="width: 50px; height: 20px; background: #ff8100"></div>

        <span style="padding-left: 10px; line-height: 20px">6 ~ 10</span>
      </div>
      <div style="display: flex; margin-bottom: 8px">
        <div style="width: 50px; height: 20px; background: #bf7830"></div>

        <span style="padding-left: 10px; line-height: 20px">11 ~ 20</span>
      </div>
      <div style="display: flex; margin-bottom: 8px">
        <div style="width: 50px; height: 20px; background: #a65400"></div>

        <span style="padding-left: 10px; line-height: 20px">21以上</span>
      </div>
    </div>
  </div>
</template>

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=84f61226c5c3819011a303ef5c321e5f&plugin=AMap.MouseTool,AMap.HawkEye,AMap.DistrictSearch,AMap.Scale,AMap.ToolBar,AMap.ControlBar,AMap.ImageLayer,AMap.BezierCurveEditor"></script>
<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      map: null,
      mouseTool: null,
      radios: null,
      dataList: [],
      list: [],
      layer: null,

      marker: null, //点位
      markers: [],

      // 弹框内容
      title: "",
      content: [],
      infoWindow: null,

      dataList: null, // 数据
      isOrdMap: true, //判断是卫星图还是普通图，普通图为true
      satellite: null, //用来存储卫星地图影像
      roadNetwork: false, //是否具有路网，默认没有
      roadNetLayer: null, //用来存储路网

      // 图层
      SOC: "CHN",
      colors: {},
      GDPSpeed: {
        520000: 10, //贵州
        540000: 10, //西藏
        530000: 8.5, //云南
        500000: 8.5, //重庆
        360000: 8.5, //江西
        340000: 8.0, //安徽
        510000: 7.5, //四川
        350000: 8.5, //福建
        430000: 8.0, //湖南
        420000: 7.5, //湖北
        410000: 7.5, //河南
        330000: 7.0, //浙江
        640000: 7.5, //宁夏
        650000: 7.0, //新疆
        440000: 7.0, //广东
        370000: 7.0, //山东
        450000: 7.3, //广西
        630000: 7.0, //青海
        320000: 7.0, //江苏
        140000: 6.5, //山西
        460000: 7, // 海南
        310000: 6.5, //上海
        110000: 6.5, // 北京
        130000: 6.5, // 河北
        230000: 6, // 黑龙江
        220000: 6, // 吉林
        210000: 6.5, //辽宁
        150000: 6.5, //内蒙古
        120000: 5, // 天津
        620000: 6, // 甘肃
        610000: 8.5, // 甘肃
        710000: 2.64, //台湾
        810000: 3.0, //香港
        820000: 4.7, //澳门
      },

      adCode: {
        520000: "贵州", //
        540000: "西藏", //
        530000: "云南", //
        500000: "重庆", //
        360000: "江西", //
        340000: "安徽", //
        510000: "四川", //
        350000: "福建", //
        430000: "湖南", //
        420000: "湖北", //
        410000: "河南", //
        330000: "浙江", //
        640000: "宁夏", //
        650000: "新疆", //
        440000: "广东", //
        370000: "山东", //
        450000: "广西", //
        630000: "青海", //
        320000: "江苏", //
        140000: "山西", //
        460000: "海南", //
        310000: "上海", //
        110000: "北京", //
        130000: "河北", //
        230000: "黑龙江", //
        220000: "吉林", //
        210000: "辽宁", //
        150000: "内蒙古", //
        120000: "天津", //
        620000: "甘肃", //
        610000: "陕西", //
        710000: "台湾", //
        810000: "香港", //
        820000: "澳门", //
      },
      disCountry: null,

      numArr: [],

      options: [
        {
          type: "全部数据",
          SiteName: "全部数据",
        },
        {
          type: "山体滑坡",
          SiteName: "山体滑坡",
        },
        {
          type: "泥石流",
          SiteName: "泥石流",
        },
        {
          type: "崩塌",
          SiteName: "崩塌",
        },
        {
          type: "地面塌陷",
          SiteName: "地面塌陷",
        },
        {
          type: "地面沉降",
          SiteName: "地面沉降",
        },
        {
          type: "地裂缝",
          SiteName: "地裂缝",
        },
      ],

      typeSelect: "全部数据",
    };
  },

  mounted() {
    this.initMap();
  },

  computed: {
    ...mapState(["lang", "ZhaiHaiData"]),
  },

  created() {
    this.getData();
    console.log("this.numArr", this.numArr);
  },

  methods: {
    getData() {
      this.dataList = [];
      for (let i = 0; i < this.ZhaiHaiData.length; i++) {
        this.dataList = [...this.dataList, ...this.ZhaiHaiData[i].dataArr];

        var cheArr = this.ZhaiHaiData[i].dataArr;

        for (let m = 0; m < cheArr.length; m++) {
          var index = this.numArr.findIndex(
            (ele) => ele.city === cheArr[m].city1
          );
          if (index === -1) {
            this.numArr.push({
              city: cheArr[m].city1,
              num: 1,
            });
          } else {
            this.numArr[index].num += 1;
          }
        }
      }
      this.restaurant = this.dataList;
    },

    initMap() {
      this.disCountry = new AMap.DistrictLayer.Country({
        zIndex: 10,
        SOC: "CHN",
        depth: 1,
        styles: {
          "nation-stroke": "#ff0000",
          "coastline-stroke": "#0088ff",
          "province-stroke": "#888888",
          fill: (props) => {
            return this.getColorByDGP(props.adcode_pro);
          },
        },
      });
      //初始化地图
      this.map = new AMap.Map("container", {
        resizeEnable: true,
        zoom: 5, //级别
        zooms: [3, 30],
        center: [105.029928, 32.827431],
        viewMode: "2D",
        lang: this.lang,
        mapStyle: "amap://styles/macaron",
        infoWindow: null,
      });

      this.mouseTool = new AMap.MouseTool(this.map);
      this.map.add(this.disCountry);

      this.map.addControl(new AMap.Scale());
      this.map.addControl(new AMap.ToolBar({ liteStyle: true }));
    },

    searchTypeClick() {
      this.colors = {};
      this.numArr = [];

      this.disCountry.setMap(null);
      this.disCountry = null;

      if (this.typeSelect === "全部数据") {
        this.getData();
      } else {
        var xu = this.ZhaiHaiData.findIndex(
          (ele) => ele.type === this.typeSelect
        );
        this.dataList = [];
        var cheArr = this.ZhaiHaiData[xu].dataArr;

        console.log(cheArr, this.numArr);
        for (let m = 0; m < cheArr.length; m++) {
          var index = this.numArr.findIndex(
            (ele) => ele.city === cheArr[m].city1
          );
          if (index === -1) {
            this.numArr.push({
              city: cheArr[m].city1,
              num: 1,
            });
          } else {
            this.numArr[index].num += 1;
          }
        }
      }
      this.disCountry = new AMap.DistrictLayer.Country({
        zIndex: 10,
        SOC: "CHN",
        depth: 1,
        styles: {
          "nation-stroke": "#ff0000",
          "coastline-stroke": "#0088ff",
          "province-stroke": "#888888",
          fill: (props) => {
            return this.getColorByDGP(props.adcode_pro);
          },
        },
      });
      this.map.add(this.disCountry);
    },

    closeInfoWindow() {
      this.map.clearInfoWindow();
      this.searchIndustry = null;
    },

    getColorByDGP(adcode) {
      var index = this.numArr.findIndex((ele) =>
        ele.city.includes(this.adCode[adcode])
      );

      console.log("adcode", adcode, this.adCode[adcode], index);

      if (!this.colors[adcode]) {
        var gdp = this.GDPSpeed[adcode];
        if (!gdp) {
          this.colors[adcode] = "rgb(227,227,227)";
        } else {
          if (index === -1) {
            this.colors[adcode] = "rgb(255,186,115)";
          } else if (this.numArr[index].num < 6) {
            this.colors[adcode] = "rgb(255,160,64)";
          } else if (this.numArr[index].num < 11) {
            this.colors[adcode] = "rgb(255,129,0)";
          } else if (this.numArr[index].num < 21) {
            this.colors[adcode] = "rgb(191,120,48)";
          } else {
            this.colors[adcode] = "rgb(166,84,0)";
          }
        }
        // 0 1-5  6-10 10-20 21+
      }
      return this.colors[adcode];
    },

    // 打开卫星地图
    addSatellite() {
      // console.log(111);
      this.isOrdMap = !this.isOrdMap;
      this.satellite = new AMap.TileLayer.Satellite();
      this.map.add(this.satellite);
    },

    // 关闭卫星地图
    removeSatellite() {
      this.isOrdMap = !this.isOrdMap;
      this.map.remove(this.satellite);
    },

    // 打开路网
    addRoadLayer() {
      this.roadNetwork = !this.roadNetwork;
      this.roadNetLayer = new AMap.TileLayer.RoadNet();
      this.map.add(this.roadNetLayer);
    },

    // 关闭路网
    removeRoadLayer() {
      this.roadNetwork = !this.roadNetwork;
      this.map.remove(this.roadNetLayer);
    },

    // 复位事件
    resetMap() {
      location.reload();
    },
  },
};
</script>

<style>
.map-buttons {
  padding: 15px;
  z-index: 999;
  position: absolute;
  top: 0;
  right: 0;
}
.btn {
  width: 6rem;
  margin: 0 1rem 0 4.5rem;
}

.openMap {
  color: red !important;
  background: rgb(227, 227, 227);
}

.map-buttons .el-input__inner {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-right: none;
}

.map-buttons .selectBtn {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  margin-right: 10px;
}

.logobox {
  position: fixed;
  top: 160px;
  right: 20px;
  padding: 15px;
  background-color: white;
  z-index: 999;
  border-radius: 5px;
  /* width: 300px; */
  border: 1px solid #dcdfe6;
}

.logobox img {
  width: 40px;
}

.logobox span {
  font-size: 16px;
  line-height: 40px;
}
</style>